<template>
  <div class="flex" style="flex-direction: column; height: 100%">
    <div class="title">食堂管理</div>
    <div class="box1" style="overflow: hidden">
      <div>就餐人数统计</div>
      <div  ref="chartRefA"  class="chart-container" style="height: calc(50% - 14px)"  v-px-to-vw   ></div>
      <div>受欢迎菜品排行榜</div>
      <div style="height: calc(50% - 14px); overflow-y: scroll; padding: 5px; color: #fff" v-px-to-vw>
        <div v-for="(item, index) in resData"   :key="index"  class="flex align-center animated-item" style="margin-bottom: 10px" >
          <div class="dish-order">{{ (index + 1).toString().padStart(2, "0") }}</div>
          <el-tooltip effect="dark" :content="item.dishname" placement="bottom">
            <div class="dish-name">{{ item.dishname }}</div>
          </el-tooltip>
          <el-progress  :stroke-width="8"   :percentage="getPercent(item.sn)"   :color="getColor(index)"   :show-text="false" style="flex: 1"  />
          <div style="margin-left: 10px">{{ item.sn }}</div>
        </div>
      </div>
      <!-- <div ref="chartRefB" class="chart-container" style="height: calc(50% - 14px)" v-px-to-vw></div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted } from "vue";
import * as echarts from "echarts";
import * as leaderApi from "@/api/leaders";
let chartRefA = ref(null);
let chartA = ref(null);

function getPercent(sn) {
  return maxData.value ? (sn / maxData.value) * 100 : 0;
}
const resData = ref([]);
const maxData = ref(0);
// 食堂管理-菜品排行
const dish_top = async () => {
  resData.value = [];
  leaderApi.dish_top().then((res) => {
    resData.value = res.data;
    maxData.value = Math.max(...res.data.map((item) => item.sn));
  });
};

// 食堂就餐人数统计
const person_statis = async () => {
  leaderApi.person_statis().then((res) => {
    initChartLine(res.data);
  });
};

onMounted(() => {
  dish_top();
  person_statis();
  refreshDataInterval();
});
const colorList = ["#00FFF0", "#00FFB2", "#faff0d"];
const getColor = (index) => {
  return colorList[index % colorList.length];
}
const initChartLine = (resData) => {
  if (chartRefA.value) {
    const existingChart = echarts.getInstanceByDom(chartRefA.value);
    if (existingChart) existingChart.dispose();
  }
  var xData = resData.map((item) => item.mon);
  var seriesData = resData.map((item) => item.person_num);
  const option = {
    color: colorList,
    // legend: {
    //   show: true,
    //   textStyle: {
    //     color: function (params) {
    //       return params.color;
    //     },
    //   },
    // },
    title: {
      text: "",
      top: 10,
      textStyle: {
        color: "#00D1FF",
        fontSize: 12,
      },
    },
    grid: {
      top: 30,
      right: 10,
      bottom: 20,
      left: 10,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "category",
      data: xData,
      axisLine: {
        lineStyle: {
          color: "#00D1FF", // ✅ X轴线颜色
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#00D1FF",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#00D1FF",
        },
      },
    },
    series: [
      {
        name: "就餐人数",
        type: "line",
        symbol: "circle",
        symbolSize: 6,
        data: seriesData,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 12,
          formatter: '{c}人' // 显示具体数值
        }
      },
      // {
      //   name: "食堂2",
      //   type: "line",
      //   symbol: "circle",
      //   symbolSize: 6,
      //   data: [5, 4, 5, 10, 10, 20, 5],
      // },
      // {
      //   name: "艺术餐厅",
      //   type: "line",
      //   symbol: "circle",
      //   symbolSize: 6,
      //   data: [5, 20, 36, 3, 10, 2, 5],
      // },
    ],
  };
  chartA.value = echarts.init(chartRefA.value);
  chartA.value.setOption(option);
};

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
      dish_top();
      person_statis();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}

</script>

<style lang="scss" scoped>
.box1 {
  width: 480px;
  height: calc(100% - 35px);
  background-image: url("@/assets/images/profile/CenterBack3x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #00fff0;
  padding: 20px;
  box-sizing: border-box;
  .animated-item {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(1);
  }
}
}
.title {
  color: white;
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
  text-align: left;
  vertical-align: middle;
  border-left: 4px solid #00a7ff;
  padding-left: 10px;
  border-radius: 2px;
}
.dish-order {
  width: 32px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 1px;
  background-color: rgba(0, 255, 240, 0.2);
  color: #fff;
  margin-right: 4px;
  font-weight: bold;
}
.dish-name {
  color: #fff;
  font-size: 14px;
  width: 8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 4px;
  cursor: pointer;
}
::v-deep .el-progress-bar__outer {
  background-color: transparent;
  border: 1px solid #1978e5;
}
</style>
